<template>
  <div class="footer-container">
    <footer>
      <div class="container">
        <div class="content">
          <div class="contact-us">
            <div class="contact-us-title">
              <i class="fa fa-handshake-o"></i>
              {{ $t('navigation.contact') }}
            </div>
            <el-skeleton :loading="contactUsLoading" animated>
              <template slot="template">
                <div class="contact-us-list">
                  <ul>
                    <li v-for="(item, index) in 5">
                      <el-skeleton-item variant="h3" :style="{ width: (100 / (item * 0.5)) + '%' }" />
                    </li>
                  </ul>
                </div>
              </template>
              <template>
                <div class="contact-us-list">
                  <ul>
                    <li :class="[item.highlight ? 'h' : '']" v-for="(item, index) in contactInfoList">
                      <i :class="['fa', item.icon]"></i>
                      {{ item.content }}
                    </li>
                  </ul>
                </div>
              </template>
            </el-skeleton>
          </div>
          <div class="navigation">
            <ul class="list">
              <li class="list-item" v-for="(item, index) in navigation">
                <div>
                  <router-link :to="item.path">
                    {{ $t(item.name) }}
                  </router-link>
                </div>
                <ul v-if="item.children">
                  <li v-for="(child, childIndex) in item.children">
                    <router-link :to="child.path">
                      {{ $t(child.name) }}
                    </router-link>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import * as ContactApi from '@/api/web/contactApi'
import * as AboutApi from '@/api/web/about'
import * as productApi from '@/api/web/productApi';
import Enumerable from 'linq';

export default {
  data () {
    return {
      contactInfoList: [],
      contactUsLoading: true,
      navigation: [
        {
          name: 'navigation.home',
          path: '/'
        },
        {
          name: 'navigation.about',
          path: '/AboutUs',
          children: []
        },
        {
          name: 'navigation.product',
          path: '/Product',
          children: []
        },
        {
          name: 'navigation.new',
          path: '/News'
        },
        {
          name: 'navigation.contact',
          path: '/ContactUs'
        },
      ]
    }
  },
  methods: {
    getContactInfo () {
      this.contactUsLoading = true;
      ContactApi.getContactInfo()
        .then(res => {
          if (res.code == 200) {
            this.contactInfoList = res.data;
            this.contactUsLoading = false;
          }
          else if (res.code == 500) {
            console.error(res.exception)
          }
        })
        .catch(err => {
          console.error('接口发生错误')
        });
    },
    getAboutTitle () {
      AboutApi.getAboutTitle()
        .then(res => {
          if (res.code == 200) {
            var list = [];
            res.data.some(item => {
              list.push({ name: item.title, path: '/AboutUs?id=' + item.id })
            })
            var about = Enumerable.from(this.navigation)
              .where(n => n.name == 'navigation.about')
              .firstOrDefault();
            about.children = list;
          }
        })
    },
    getAllProductCategorieList () {
      productApi.getAllProductCategorieList()
        .then(res => {
          if (res.code == 200) {
            var list = [];
            res.data.some(item => {
              list.push({ name: item.categoryName, path: '/Product?categoriesId=' + item.id })
            })
            var product = Enumerable.from(this.navigation)
              .where(n => n.name == 'navigation.product')
              .firstOrDefault();
            product.children = list;
          }
        })
    },
  },
  mounted () {
    this.getContactInfo();
    this.getAboutTitle();
    this.getAllProductCategorieList();
  }
}
</script>

<style scoped>
footer {
  /* margin-top: 50px; */
  padding-top: 25px;
  background-color: #303030;
}

.content {
  display: flex;
  color: #D3D3D3;
  padding: 20px 0px;
}

.content .contact-us {
  width: 500px;
}

.contact-us .contact-us-title {
  font-size: 16px;
  font-weight: bold;
  padding: 20px 0px;
  border-bottom: 1px solid #4a4a4a;
  color: #fff;
}

.contact-us-list ul {
  list-style: none;
  padding: 0;
}

.contact-us-list ul li {
  font-size: 14px;
  padding: 5px 0px;
  display: flex;
}

.contact-us-list ul li i {
  margin-right: 10px;
}

.navigation {
  flex: 1;
  padding: 0px 50px;
}

.navigation .list {
  display: flex;
  padding: 0px;
  list-style: none;
}

.navigation .list .list-item {
  font-size: 16px;
  font-weight: bold;
  width: calc(100% / 5);
  text-align: center;
}

.navigation .list .list-item a {
  color: #fff;
}

.list-item ul {
  margin-top: 20px;
  list-style: none;
  padding: 0px;
}

.list-item ul li {
  padding: 10px 0px;
}

.list-item ul li a {
  color: #D3D3D3 !important;
  font-size: 14px;
  font-weight: 500;
}

.h {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
</style>